<template>
  <style>
    .cr-nav-menu-item {
      align-items: center;
      display: flex;
      font-weight: 500;
      margin-inline-end: 2px;
      margin-inline-start: 1px;
      min-height: 20px;
      padding-block-end: 10px;
      padding-block-start: 10px;
      padding-inline-start: 23px;
    }

    :host-context([enable-branding-update]) .cr-nav-menu-item {
      --iron-icon-fill-color: var(--google-grey-700);
      border-end-end-radius: 100px;
      border-start-end-radius: 100px;
      box-sizing: border-box;
      color: var(--google-grey-900);
      font-size: 14px;
      min-height: 48px;
      overflow: hidden;
      position: relative;
    }

    :host-context([enable-branding-update]):host-context(cr-drawer)
        .cr-nav-menu-item {
      border-end-end-radius: 0;
      border-start-end-radius: 0;
      font-size: inherit;
      min-height: 40px;
    }

    :host-context([enable-branding-update]) .cr-nav-menu-item:hover {
      background: var(--google-grey-200);
    }

    :host-context([enable-branding-update]):host-context(cr-drawer)
        .cr-nav-menu-item:hover {
      background: transparent;
    }

    .cr-nav-menu-item[selected] {
      --iron-icon-fill-color: var(--cr-link-color);
      color: var(--cr-link-color);
    }

    :host-context([enable-branding-update]) .cr-nav-menu-item[selected] {
      --iron-icon-fill-color: var(--google-blue-600);
      background: var(--google-blue-50);
      color: var(--google-blue-700);
    }

    @media (prefers-color-scheme: dark) {
      :host-context([enable-branding-update]) .cr-nav-menu-item {
        --iron-icon-fill-color: var(--google-grey-500);
        color: white;
      }

      :host-context([enable-branding-update]) .cr-nav-menu-item:hover {
        --iron-icon-fill-color: white;
        background: var(--google-grey-800);
      }

      :host-context([enable-branding-update]) .cr-nav-menu-item[selected] {
        --iron-icon-fill-color: black;
        background: var(--google-blue-300);
        color: var(--google-grey-900);
      }

      :host-context([enable-branding-update]):host-context(cr-drawer)
          .cr-nav-menu-item[selected] {
        --iron-icon-fill-color: var(--cr-link-color);
        color: var(--cr-link-color);
      }
    }

    :host-context([enable-branding-update]):host-context(cr-drawer)
        .cr-nav-menu-item[selected] {
      background: transparent;
    }

    .cr-nav-menu-item:focus {
      background: transparent; /* Override iron-list selectable item CSS. */
      outline: auto 5px -webkit-focus-ring-color;
    }

    :host-context([enable-branding-update]) .cr-nav-menu-item:focus {
      /**
       * A non-zero z-index to force the outline to appear above the fill
       * background of selected item.
       */
      z-index: 1;
    }

    .cr-nav-menu-item iron-icon {
      margin-inline-end: 24px;
      pointer-events: none;
      vertical-align: top;
    }

    :host-context([enable-branding-update]) .cr-nav-menu-item iron-icon {
      margin-inline-end: 20px;
    }

    .cr-nav-menu-item paper-ripple {
      display: none;
    }

    :host-context([enable-branding-update]) .cr-nav-menu-item paper-ripple {
      display: block;
    }

    :host-context([enable-branding-update]):host-context(cr-drawer)
        .cr-nav-menu-item paper-ripple {
      display: none;
    }
  </style>
</template>